<template>
	<base-popup
		class="min-h-[80vh]"
		titleT="report.title"
		:show="profileStore.reportShow"
		@close="onClose">
		<div class="h-full relative px-9 py-5 mb-2">
			<n-date-picker v-model:value="date" type="daterange" clearable />
			<base-list-plus
				class="h-full"
				:loading="loading"
				:isFinish="isFinish"
				:isEmpty="isEmpty"
				@load="search">
				<div v-for="(list, key) in groupData" :key="key">
					<div class="mt-[10px]">{{ key }}</div>
					<component v-for="item in list" :key="item.id" :data="item" :is="getComponent(item)" />
				</div>
			</base-list-plus>
		</div>
	</base-popup>
</template>
<script lang="ts" setup>
import { NDatePicker } from 'naive-ui'
import ReportItem from './report-item.vue'
import ReportList from './report-list.vue'
import { BaseListPlus, BasePopup } from '@/components/base'
import { ref, computed, watch, nextTick } from 'vue'
import { useProfileStore, useAppStore } from '@/store'
import { useRequest } from '@/hooks'
import { getReports } from '@/api/wallet'
import { fmtDate } from '@/utils'
import { ReportType } from '@/types'

defineOptions({ name: 'ViewsProfileReport' })

const appStore = useAppStore()
const profileStore = useProfileStore()

const onClose = () => profileStore.setReportShow(false)

const getComponent = (item: ReportType) => (item.subList ? ReportList : ReportItem)

const { run, loading, isFinish, isEmpty, list } = useRequest<ReportType>(getReports, {
	pageSize: 500
})

const date = ref<[number, number] | null>(null)

const groupData = computed(() => {
	const obj: any = {}
	let lastItem: any
	list.value.forEach((item) => {
		const datetime = fmtDate(item.createdAt)
		if (!obj[datetime]) {
			obj[datetime] = []
		}
		if (item.mainTitleEnum === 'Rebate' || item.mainTitleEnum === 'Cashback') {
			if (lastItem?.mainTitleEnum === item.mainTitleEnum) {
				lastItem?.subList.push(item)
			} else {
				lastItem = {
					mainTitleEnum: item.mainTitleEnum,
					createdAt: item.createdAt,
					balanceAfter: item.balanceAfter,
					bizType: item.bizType,
					subExtData: item.subExtData,
					subList: [item]
				}
				obj[datetime].push(lastItem)
			}
		} else if (item.bizType === 'slots' && item.sessionId) {
			if (lastItem?.sessionId === item.sessionId) {
				lastItem?.subList.push(item)
			} else {
				lastItem = {
					sessionId: item.sessionId,
					mainTitleEnum: item.mainTitleEnum,
					subTitleValue: item.subTitleValue,
					createdAt: item.createdAt,
					balanceAfter: item.balanceAfter,
					bizType: item.bizType,
					subExtData: item.subExtData,
					subList: [item]
				}
				obj[datetime].push(lastItem)
			}
		} else {
			lastItem = item
			obj[datetime].push(item)
		}
	})
	return obj
})

watch(date, () => {
	nextTick(() => search(true))
})

const search = (refresh = false) => {
	const startdate = date.value && date.value?.length > 0 ? date.value[0] : null
	const enddate = date.value && date.value?.length > 1 ? date.value[1] : null
	run(
		{
			locale: appStore.lang,
			version: 'v2',
			startdate,
			enddate
		},
		{ refresh }
	)
}
</script>
